<template>
	<div>
		<form action="">
			<div class="item">
				<label for="">姓名：</label>
				<input type="text" name="realname" v-model="realname" />
			</div>
			<div class="item">
				<input type="file" name="file" @change="fileChange" />
			</div>
			<div class="item">
				<el-button type="primary" @click="doUpload">上传</el-button>
			</div>
		</form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				realname: "", //姓名,
				config: {}, //上传的配置信息
				file: null
			}
		},
		async mounted() {
			//获取上传配置信息
			let result = await this.$axios.get("http://localhost:3000/api/uploadfile").catch(err => {
				console.error(err)
			})
			this.config = result.data;


		},
		methods: {
			fileChange(e) {

				this.file = e.target.files[0];

			},
			//执行上传
			doUpload() {
				//上传地址
				let url = this.config.url;

				//整理参数
				// let formData = {
				// 	key: "test.png",
				// 	realname: this.realname,
				// 	Signature: this.config.authorization,
				// 	"x-cos-security-token": this.config.token,
				// 	"x-cos-meta-fileid": this.config.cos_file_id,
				// 	file: this.config.file,

				// }
				// console.log(data);return;

				var formData = new FormData()
				
				formData.append("x-cos-meta-fileid", this.config.cos_file_id);
				formData.append("x-cos-security-token", this.config.token);
				formData.append("Signature", this.config.authorization);
				formData.append("key", "testfile.png");
				formData.append("file", this.file);
				
				console.log(formData,333);
				return;
				//表单类型
				let config = {
					headers: {
						"Content-Type": "multipart/form-data"
					}
				};

				this.$axios.post(url, formData, config).then(function(result) {
					console.log(result)
				}).catch(err => {
					console.log(err, "111")
				})
			}


		}


	}
</script>

<style scoped>
	.item {
		margin: 10px;
		border: 1px solid #ccc;
		padding: 10px;
	}
</style>
